<template>
    <el-drawer title="新建模块" :before-close="handleClose" :visible.sync="dialogVisible" :append-to-body="true"
        :wrapperClosable="false" :modal="false" direction="rtl" custom-class="demo-drawer" ref="drawer">
        <div class="demo-drawer__content">
            <el-form :model="form" class="demo-form-inline" ref="form" :rules="rules" label-width="100px">
                <el-form-item label="模块名称">
                    <el-input v-model="form.title" placeholder="限24个字"></el-input>
                </el-form-item>
                <el-form-item prop="cover_url" label="封面图片" ref="cover_url">
                    <div class="uploadcol">
                        <div class="uploadborder-read">
                            <img v-if="form.cover_url" :src="form.cover_url" />
                            <img v-else src="@/assets/img/uploadimg.jpg" />
                        </div>
                        <el-button type="primary" @click="isShowPic = true" size="mini"
                            style="margin-top:10px">上传封面图片</el-button>
                    </div>
                    <select-img :show="isShowPic" @update="cleanDiaglog" :selectType="imgnum" @selectSure="selectImgs"
                        :source="1" :type="0"></select-img>
                </el-form-item>

            </el-form>
            <div class="demo-drawer__footer footer-div">
                <el-button @click="cancelForm" class="footer-div-but">取 消</el-button>
                <el-button class="footer-div-but" type="primary" @click="submitForm" :loading="loading">{{ loading ?
                    '提交中 ...' : '确 定' }}</el-button>
            </div>
        </div>
    </el-drawer>
</template>
<script>
import { editReadModule, getInfo } from "@/api/kanke/textbook/read";

export default {
    name: "KanKeTextbookAddReadModule",

    props: {
        dialogVisible: {
            type: Boolean,
            default: false
        },
        module_id: {
            type: Number,
            default: 0
        }
    },

    data() {
        return {
            dialog: false,
            loading: false,
            isShowPic: false,
            imgnum: 1,
            form: {
                id: 0,
                cover_url: '',
                title: '',
            },
            formLabelWidth: '80px',
            timer: null,
            rules: {
                title: [
                    { required: true, message: '请输入模块名称', trigger: 'change' },
                    // 长度最多24个字
                    { min: 1, max: 24, message: '长度在 1 到 24 个字', trigger: 'change' },
                ],
                cover_url: [
                    { required: true, message: '请上传模块封面图', trigger: 'change' },
                ]
            }
        }
    },
    created() {
        this.init();
    },
    computed: {

    },
    methods: {
        init() {
            if (this.module_id == 0) {
                this.form.cover_url = '';
                this.form.id = 0;
                this.form.title = '';
            }
            if (this.module_id > 0) {
                const params = {
                    module_id: this.module_id
                };

                getInfo(params).then((res) => {
                    console.log(res)
                    if (res.code == 200) {
                        this.form = res.data.info;
                    }
                })
            }
        },
        //取消
        cancelForm() {
            this.loading = false;
            this.$emit('update:dialogVisible', false);
        },

        cleanDiaglog() {
            this.isShowPic = false;
        },
        selectImgs(res) {
            console.log(res);
            if (res) {
                this.form.cover_url = res[0].urls
                this.isShowPic = false;
                this.$refs.cover_url.onFieldChange()
            }
        },
        handleClose() {
            this.$emit('update:dialogVisible', false);
        },
        submitForm() {
            if (this.loading) {
                return;
            }
            this.$confirm('确定要提交表单吗？')
                .then(_ => {
                    console.log(this.form);
                    this.$refs['form'].validate((valid) => {
                        if (valid) {
                            const params = {
                                ...this.form
                            }
                            editReadModule(params).then(res => {
                                if (res.code == 200) {
                                    this.$message({
                                        message: res.msg,
                                        type: 'success'
                                    });
                                    this.$emit('handleAddSuccess');
                                    // this.loading = true;
                                    // this.timer = setTimeout(() => {
                                    //     done();
                                    //     // 动画关闭需要一定的时间
                                    //     setTimeout(() => {
                                    //         this.loading = false;
                                    //         }, 400);
                                    // }, 2000);
                                }
                            })
                        }
                    })

                })
                .catch(_ => { });
        },
    }
}
</script>
<style lang="scss" scoped>
.footer-div {
    position: fixed;
    bottom: 10%;
    right: 10%;
}

.footer-div-but {
    width: 120px;
    margin-left: 50px;
}

.uploadcol {
    .uploadborder-read {
        margin-top: 10px;

        img {
            width: 200px;
            height: 200px;
        }
    }
}

::v-deep .el-form-item {
    margin-bottom: 22px;
}
</style>